<template>
    <div>
        App组件
        <Home></Home>
        <AsyncCategory></AsyncCategory>
    </div>
</template>

<script>
// import AsyncCategory from './AsyncCategory.vue' //正常引入,不会分包
import Home from './Home.vue'
import {defineAsyncComponent} from 'vue'
import Loader from './Loader.vue'

// const AsyncCategory = defineAsyncComponent(()=>import("./AsyncCategory.vue"))    //工厂函数
//当一个函数返回一个对象时，我们称之他为 工厂函数(factory function)。 我们可以组合工厂函数来构建任意复杂的对象,这不需要我们结合使用 new 或 this
const AsyncCategory = defineAsyncComponent({
    loader: ()=>import("./AsyncCategory.vue"),
    loadingComponent:Loader     //加载之前的组件
})   //对象写法

export default {
    components: {
        AsyncCategory, Home
    },

}
</script>

<style lang="scss" scoped>
</style>